<template>
  <el-tabs v-model="mTabValue" type="card" @tab-change="changeTab" @tab-remove="removeTab">
    <el-tab-pane 
      v-for="(item) in mainTabs" 
      :key="item.name" 
      :label="item.title" 
      :name="item.name" 
      :closable="item.name != 'home'">
      <home-view class="main-content" :data="item.content" v-if="item.name.indexOf('home') >= 0" @mainCard="openMainCard"/>
      <base-view class="main-content" :data="item.content" v-if="item.name.indexOf('base') >= 0"/>
      <client-view class="main-content" :data="item.content" v-if="item.name.indexOf('client') >= 0"/>
      <device-view ref="DEV_VIEW" class="main-content" :data="item.content" v-if="item.name.indexOf('device') >= 0"/>
      <app-view class="main-content" :data="item.content" v-if="item.name.indexOf('apps') >= 0"/>
      <log-view class="main-content" :data="item.content" v-if="item.name.indexOf('log') >= 0"/>
      <user-view class="main-content" :data="item.content" v-if="item.name.indexOf('user') >= 0"/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { ref } from 'vue'
import HomeView from '../tab_content/AhomeView.vue'
import BaseView from '../tab_content/BaseView.vue'
import ClientView from '../tab_content/ClientView.vue'
import DeviceView from '../tab_content/DeviceView.vue'
import AppView from '../tab_content/AppView.vue'
import LogView from '../tab_content/LogView.vue'
import UserView from '../tab_content/UserView.vue'
import util from '@/assets/js/util'
import { ElNotification } from 'element-plus'
export default {
  components: { 
    HomeView,
    BaseView,
    ClientView,
    DeviceView,
    AppView, 
    LogView,
    UserView 
  },
  setup() {
    const default_tab = [
      {id: 0, name: 'home', title: '首页', content: {id: 'home', msg: '首页'}}
    ]
    let mainTabs = ref(default_tab)
    let mTabValue = ref('home')
    // 新增tab
    function addTab(n,t) {
      const i = mainTabs.value.findIndex((item) => item.name === n)
      if (i < 0) {
        mainTabs.value.push({name: n, title: t.length > 8?t.substring(0,8)+'…':t, content: {id: n, msg: t}})
      }
      mTabValue.value = n
      util.elTabStatus('set',mainTabs.value)
    }
    // 切换tab
    function changeTab(e) {
      // console.log(e)
      util.elTabStatus('set',e)
    }
    // 关闭tab
    function removeTab(e) {
      if (e != 'home') {
        if (mTabValue.value == e) {
          const i = mainTabs.value.findIndex((item) => item.name === e)
          if (i > 0) mTabValue.value = mainTabs.value[i-1].name
        }
        mainTabs.value = mainTabs.value.filter((item) => item.name !== e)
      }
      util.elTabStatus('set',mainTabs.value)
    }
    //mqtt消息监控
    let DEV_VIEW = ref(null)
    function mqttOnMsg(t,m) {
      //console.log(t,m)
      if (!util.isNull(DEV_VIEW.value)) {
        let d = DEV_VIEW.value
        for(let i in d) {
          d[i].mqttOnMsg(t,m)
        }
      }
    }
    // 首页打开选项卡
    function openMainCard(e) {
    //console.log(e)
      if (e.n && e.t) {
        addTab(e.n,e.t)
      } else {
        ElNotification({
          title: "无效的连接",
          message: "",
          type: "warning",
          duration: 1500,
        });
      }
    }

    return {
      mainTabs, mTabValue,
      addTab, changeTab, removeTab, 
      DEV_VIEW, mqttOnMsg, openMainCard
    }
  },
}
</script>

<style lang="scss" scoped>
:deep.el-tabs{
  .el-tabs__header{
    margin: 0;
    border: 0;
  }
  .el-tabs__nav{
    background-color: #fff;
    border: 0;
  }
  .el-tabs__nav-prev{
    color: $color-primary;
    background-color: #fff;
    font-size: 22px;
    font-weight: 900;
  }
  .el-tabs__nav-next{
    color: $color-primary;
    background-color: #fff;
    font-size: 22px;
    font-weight: 900;
  }
  .el-tab-pane{
    background-color: #fff;
    border:0;
    .main-content{
      width: 100%;
      height: calc(100vh - 115px);
    }
  }
}

</style>